import React from 'react'
import { Routes, Route } from 'react-router-dom'
import Redirect from './Redirect'
import AuthComponent from '../components/authcomponent/AuthComponent'

// 路由组件
export default function IndexRouter () {
  return (

    <Routes>
      {/* 一级路由,整个页面都会刷新的那种 */}
      <Route path='/index' element={
        <AuthComponent>
          {LazyLoad("userIndex")}
        </AuthComponent>}>

        {/* 二级路由可以写相对路径，结果就是/index/test ,如果需要进入首页时默认加载子组件的话*/}
        <Route index element={LazyLoad("userIndex/child/IndexContent")} />
        {/* 只有加上子路径才会加载子组件 */}
        <Route path='index' element={LazyLoad("userIndex/child/IndexContent")} />
        <Route path='user-manage/userlist' element={LazyLoad("userIndex/child/UserList")} />
        <Route path='right-manager/role/list' element={LazyLoad("userIndex/child/RoleList")} />
        <Route path='right-manager/right/list' element={LazyLoad("userIndex/child/RightList")} />
      </Route>

      {/* 跳转至网损模板页面 */}
      <Route path='/system/lineLoss/manageTemp' element={
        <AuthComponent>
          {LazyLoad("lineLoss/lineLossTemp")}
        </AuthComponent>}>
      </Route>

      {/* 跳转至网损填报页面 */}
      <Route path='/system/lineLoss/lineLossFill' element={
        <AuthComponent>
          {LazyLoad("lineLoss/lineLossFill")}
        </AuthComponent>}>
      </Route>

      {/* 跳转至在线办公页面 */}
      <Route path='/system/onlineOffice' element={
        <AuthComponent>
          {LazyLoad("onlineOffice")}
        </AuthComponent>}>
      </Route>

      {/* 动态路由 ,以冒号为占位符，后面跟变量名，随意的名字*/}
      {/* <Route path="/film/:myid" element={<XXXX/>}></Route> */}

      {/* 登录页面跳转 */}
      <Route path='/login' element={LazyLoad("login")}></Route>

      {/* 父级路由，会改变整个页面的意思 */}
      {/* <Route path='/film' element={LazyLoad("Film")}></Route> */}

      {/* <Route path='/Cinema' element={LazyLoad("Cinema")}></Route> */}

      {/* <Route path='/Center' element={
        <AuthComponent>
          {LazyLoad("Center")}
        </AuthComponent>}>
      </Route> */}

      {/* 重定向,如果是斜杠就到film首页 */}
      <Route path='/' element={<Redirect to="/index" />}></Route>

      {/* 如果是瞎输入的路径就到404页面 */}
      <Route path='*' element={LazyLoad("pagenotfound")}></Route>
    </Routes>
  )
}


//解决第一次打开页面时加载慢的问题
// 路由懒加载，要跳转到那个页面的时候再下载对应的组件
//这样如果在路由中有非常多的组件时，就不会在初始化时一次性下载所有的组件了
const LazyLoad = (path) => {
  const Comp = React.lazy(() => import(`../views/${path}`))
  return (
    <React.Suspense fallback={<></>}>
      <Comp />
    </React.Suspense>
  )
}
